<template>
    <div style="padding:0 1.25rem;">
        <el-row class="content2_left_b">
            <div @click="get_to('https://fxg.jinritemai.com/ffa/morder/order/list?btm_ppre=a0.b0.c0.d0&btm_pre=a0.b0.c0.d0')">
            <el-col :span="6" class="content2_left_b hove_ys">
                <el-row class="content2_left_b">
                    <el-col :span="6">
                        <div class="content2_left_title">订单管理</div>
                    </el-col>
                    <el-col :span="18" style="text-align:center;">
                        <el-row>
                            <el-col :span="12">
                                <div class="content2_left_title_title">待支付:</div>
                                <div>{{ddgl.unpaid}}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="content2_left_title_title">待发货:</div>
                                <div>{{ddgl.stock_up}}</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <div class="content2_left_title_title">超时未发货:</div>
                                <div>{{ddgl.ship_delay}}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="content2_left_title_title">24H需发货:</div>
                                <div>{{ddgl.exp_ship}}</div>
                            </el-col>
                        </el-row>

                    </el-col>

                </el-row>
                <div class="map3" style="width:100%" ref="echarts"></div>
            </el-col>
            </div>
            <div @click="get_to('https://fxg.jinritemai.com/ffa/logistics/parcelCenter?btm_ppre=a0.b0.c0.d0&btm_pre=a0.b0.c0.d0')">
            <el-col :span="6" class="content2_left_b hove_ys">
                <el-row class="content2_content content2_left_b">
                    <el-col :span="6">
                        <div class="content2_left_title">包裹中心</div>
                    </el-col>
                    <el-col :span="18">
                        <el-row class="">
                            <el-col :span="12">
                                <div class="content2_left_title_title">包裹数:</div>
                                <div>{{bgzx.total}}个</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="content2_left_title_title">中转超时:</div>
                                <div>{{bgzx.TRANS_EXCEPTION}}</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <div class="content2_left_title_title">揽收已超时24H:</div>
                                <div>{{bgzx.GOT_EXCEPTION}}个</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="content2_left_title_title">揽收即将超时:</div>
                                <div>{{bgzx.GOT_PRE_TIMEOUT}}</div>
                            </el-col>
                        </el-row>

                    </el-col>

                </el-row>
                <div class="map3" style="width:100%" ref="echarts1"></div>
            </el-col>
        </div>
        <div @click="get_to('https://compass.jinritemai.com/shop/graphic/graphic-analysis?from_page=%2Fshop%2Fmall-recommend&btm_ppre=a6187.b09827.c0.d0&btm_pre=a6187.b7405.c0.d0&btm_show_id=d26cfa74-4c18-4c1a-bd02-18441c9f422f')">
            <el-col :span="6" class="content2_left_b hove_ys">
                <el-row class="content2_content content2_left_b">
                    <el-col :span="8">
                        <div class="content2_left_title">商品图文经营</div>
                        <div><span style="font-size: 25px;">0</span> /10</div>
                        <el-button size="mini" type="primary">立即创建</el-button>
                    </el-col>
                    <el-col :span="16">
                        <el-row class="">
                            <el-col :span="12">
                                <div class="content2_left_title_title">商品曝光:</div>
                                <div>{{twjy.product_impressions}}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="content2_left_title_title">图文观看:</div>
                                <div>{{twjy.video_view}}</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <div class="content2_left_title_title">商品点击:</div>
                                <div>{{twjy.product_click}}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="content2_left_title_title">新发图文数量:</div>
                                <div>{{twjy.publish_video_count}}</div>
                            </el-col>
                        </el-row>

                    </el-col>

                </el-row>
                <div class="map3" style="width:100%" ref="echarts3"></div>
            </el-col>
            </div>
            
            <el-col :span="6" class="content2_left_b hove_ys">
                <div @click="get_to('https://compass.jinritemai.com/shop/short-video-analysis/self?from_page=%2Fshop%2Flive-list&btm_ppre=a6187.b168201.c0.d0&btm_pre=a6187.b4991.c0.d0&btm_show_id=f6a61905-c4ab-4c35-a95d-2898069e156f')">
                <el-row>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">短视频</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="map" style="width:100%" ref="echarts4"></div>
                    </el-col>
                </el-row>
            </div>
                <div @click="get_to('https://compass.jinritemai.com/shop/live-list?from_page=%2Fshop%2Fgraphic%2Fgraphic-analysis&btm_ppre=a6187.b7405.c0.d0&btm_pre=a6187.b168201.c0.d0&btm_show_id=70e3eb6b-f914-427b-8022-2d6bc5c48a2f')">
                <el-row>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">直播</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="map" style="width:100%" ref="echarts5"></div>
                    </el-col>
                </el-row>
            </div>
            </el-col>
       
        </el-row>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        components: {

        },
        data() {
            return {
                ddgl:{},
                bgzx:{},
                twjy:{}
            };
        },
        mounted: function () {
            this.EchartsInit()
           
        },
        created: function () {
            //图文经营
            var that=this
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/tuwen_jingying?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.twjy=response.data.data
                    }
                    
                  
                })
                .catch(function (error) {
                    console.log(error)
                })
            //运营
            var that=this
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/dingdan_guanli?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.ddgl=response.data.data
                        console.log('订单管理',that.ddgl)
                    }
                  
             
                })
                .catch(function (error) {
                    console.log(error)
                })
                //包裹中心
            var that=this
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/baoguo?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.bgzx=response.data.data
                    }
                    
              
                })
                .catch(function (error) {
                    console.log(error)
                })
        },
        methods: {
            get_to(url){
                window.open(url, '_blank')
            },
            EchartsInit() {
                var that=this
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/tuwen_jingying?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                   
                    if(response.data.code==0){
                        var twjy=response.data.data
                    var dsp_x=[]
                    var dsp_y=[]
                    var zb_x=['观看次数','成交金额','直播间数']
                    var zb_y=[]
                    for(var i=0;i<twjy.video.data_result.two_axis_trends.value.length;i++){
                        dsp_x.push(twjy.video.data_result.two_axis_trends.value[i].horizontal)
                        dsp_y.push(twjy.video.data_result.two_axis_trends.value[i].y.watch_cnt)
                    }
                   
                       
                    zb_y.push(twjy.live.watch_cnt)
                    zb_y.push(twjy.live.pay_amt)
                    zb_y.push(twjy.live.live_room_cnt)
                    console.log('直播',zb_x,zb_y)
                    that.$echarts.init(that.$refs.echarts3, null, {
                    width: 400,
                    height: 200
                }).setOption({
                    tooltip: {
                                trigger: 'axis',

                            },

                    xAxis: {
                        type: 'category',
                        data: ['商品曝光', '图文观看', '商品点击', '新发图文数量'],
                        axisLabel: { interval: 0, rotate: 70, fontSize: 10 },
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [
                            twjy.product_impressions,
                            twjy.video_view,
                            twjy.product_click,
                            twjy.publish_video_count
                            ],
                            type: 'bar',
                            
                        }
                    ]
                })
                that.$echarts.init(that.$refs.echarts4, null, {
                    width: 300,
                    height: 200
                }).setOption({
                    tooltip: {
                                trigger: 'axis',

                            },
                    xAxis: {
                        type: 'category',
                        data: dsp_x,
                        axisLabel: { interval: 0, rotate: 70, fontSize: 10 },
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: {
                               
                               
                                right: '16%',
                                left: '18%'

                            },
                    series: [
                        {
                            data: dsp_y,
                            type: 'bar'
                        }
                    ]
                })
                that.$echarts.init(that.$refs.echarts5, null, {
                    width: 300,
                    height: 200
                }).setOption({
                    tooltip: {
                                trigger: 'axis',

                            },
                    xAxis: {
                        type: 'category',
                        data: zb_x,
                        axisLabel: { interval: 0, rotate: 70, fontSize: 10 },
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: {
                               
                                right: '16%',
                                left: '18%'

                            },
                    series: [
                        {
                            data:zb_y,
                            type: 'bar',
                          
                        }
                    ]
                    
                })
                    }
                    
                })
                .catch(function (error) {
                    console.log(error)
                })
                
              
                
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/dingdan_guanli?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                   
                    if(response.data.code==0){
                        var ddgl=response.data.data
                     
                     that.$echarts.init(that.$refs.echarts, null, {
                     width: 400,
                     height: 200
                 }).setOption({
                     tooltip: {
                         trigger: 'item'
                     },
                     legend: {
                         top: '5%',
                         left: 'center'
                     },
                     series: [
                         {
                             name: '订单管理',
                             type: 'pie',
                             radius: ['40%', '70%'],
                             avoidLabelOverlap: false,
                             itemStyle: {
                                 borderRadius: 10,
                                 borderColor: '#fff',
                                 borderWidth: 2
                             },
                             label: {
                                 show: false,
                                 position: 'center'
                             },
                             emphasis: {
                                 label: {
                                     show: true,
                                     fontSize: 40,
                                     fontWeight: 'bold'
                                 }
                             },
                             labelLine: {
                                 show: false
                             },
                             data: [
                                 { value: ddgl.unpaid, name: '待支付' },
                                 { value: ddgl.stock_up, name: '待发货' },
                                 { value: ddgl.ship_delay, name: '超时未发货' },
                                 { value: ddgl.exp_ship, name: '24H需发货' },
                             
                             ]
                         }
                     ]
                 })
                    }
                    
                })
                .catch(function (error) {
                    console.log(error)
                })
                
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/baoguo?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        var bgzx=response.data.data
                 
                 that.$echarts.init(that.$refs.echarts1, null, {
                 width: 400,
                 height: 200
             }).setOption({
                 tooltip: {
                     trigger: 'item'
                 },
                 legend: {
                     top: '5%',
                     left: 'center'
                 },
                 series: [
                     {
                         name: '包裹中心',
                         type: 'pie',
                         radius: ['40%', '70%'],
                         avoidLabelOverlap: false,
                         itemStyle: {
                             borderRadius: 10,
                             borderColor: '#fff',
                             borderWidth: 2
                         },
                         label: {
                             show: false,
                             position: 'center'
                         },
                         emphasis: {
                             label: {
                                 show: true,
                                 fontSize: 40,
                                 fontWeight: 'bold'
                             }
                         },
                         labelLine: {
                             show: false
                         },
                         data: [
                             { value: bgzx.total, name: '包裹数' },
                             { value: bgzx.GOT_EXCEPTION, name: '中转超时' },
                             { value: bgzx.GOT_PRE_TIMEOUT, name: '揽收已超时24H' },
                             { value: bgzx.TRANS_EXCEPTION, name: '揽收即时超时' },
                          
                         ]
                     }
                 ]
             })
                    }
                   
                })
                .catch(function (error) {
                    console.log(error)
                })
                

            }
        }
    }
</script>
<style lang="less">
  
    .content2_left {
        text-align: center;
        border-radius: .4rem;

    }

    .content2_content {
        text-align: center;
    }

    .content2_left_b {
        background-color: #fff;
        border-radius: .4rem;
        line-height: 2rem;
        padding: .625rem;
    }

    .content2_left_title {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        margin-left: 0.375rem;
        margin-bottom: 0.1875rem;
        /* color: transparent; */
        /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
        -webkit-background-clip: text;
    }

    .content2_left_title_title {
        color: #959697;
        font-size: 0.7375rem;
    }
</style>